<template>
  <div class="app-container pagination">
    <el-card>
      <div class="header">
        <el-button type="primary" icon="el-icon-printer" @click="showDialog">添加附加费</el-button>
      </div>
      <ws-pagination v-model="pagination">
        <el-table-column prop="name" label="费用名称" min-width="150" header-align="center" align="center"/>
        <el-table-column label="启用模式" min-width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <el-tag type="info">{{ scope.row.mode===1?'默认':'自选' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="费用" min-width="120" header-align="center" align="center"/>
        <el-table-column prop="desc" label="简要说明" min-width="240" header-align="center" align="center"/>
        <el-table-column label="状态" width="120" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <div @click="changeStatus(scope.row)">
              <el-tag :type="scope.row.status===2?'danger':'success'">{{ scope.row.status===2?'已禁用':'已启用' }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" header-align="center" align="center" fixed="right">
          <template slot-scope="scope">
            <!--编辑-->
            <el-button size="small" type="info" icon="el-icon-edit" circle @click="showDialog(scope.row)"/>
            <!--删除-->
            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="deleteRow(scope['row'])"/>
          </template>
        </el-table-column>
      </ws-pagination>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" title="运营车型" width="500px" class="dialog" center>
      <el-form label-width="150px">
        <el-form-item label="费用名称">
          <el-input v-model="form['name']"/>
        </el-form-item>
        <el-form-item label="模式">
          <el-radio-group v-model="form['mode']">
            <el-radio :label="1">默认</el-radio>
            <el-radio :label="2">自选</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="费用">
          <el-input-number v-model="form['price']"/>
        </el-form-item>
        <el-form-item label="简要说明">
          <el-input v-model="form['desc']" type="textarea" row="3"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRentCarSurcharge">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'RouteAirportList',
    components: {},
    data() {
      return {
        pagination: {},
        // 车辆弹窗
        dialogVisible: false,
        form: {
          price: '',
          name: '',
          mode: 1,
          desc: ''
        }
      }
    },
    watch: {},
    created() {
      // 初始化分页器
      this.initPagination();
    },
    methods: {
      // 初始化分页器
      initPagination() {
        // 创建分页器
        this.pagination = new this.$pagination(async (...args) => {
          // 加载分页列表
          const result = await this.$service.applicationGetRentCarSurchargeList({...args[0]});
          if (result.code !== 0) {
            return this.$message.error(result.msg || '系统错误');
          }
          return result;
        });
        // 加载分页数据
        this.pagination.load();
      },
      // 显示弹窗
      showDialog(row) {
        if (row.id) {
          Object.assign(this.form, row);
        } else {
          this.form = {
            price: '',
              name: '',
              mode: 1,
              desc: ''
          }
        }
        this.dialogVisible = true;
      },
      // 增加附加费
      submitRentCarSurcharge() {
        (async () => {
          let result = null;
          if (!this.form.id) {
            result = await this.$service.applicationAddRentCarSurcharge(this.form);
          } else {
            result = await this.$service.applicationModifyRentCarSurcharge(this.form);
          }
          if (result.code === 0) {
            this.$message.success(`提交成功~`);
            // 加载分页数据
            this.pagination.load();
            this.dialogVisible = false;
          } else {
            this.$message.error(result.msg);
          }
        })();
      },
      // 删除指定行
      deleteRow({id}) {
        this.$confirm('此操作将删除该附加费用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              const result = await this.$service.applicationDeleteRentCarSurcharge({id: id});
              if (result.code === 0) {
                this.$message.success(`删除成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      },
      // 切换上下架状态
      changeStatus({id, status}) {
        this.$confirm(`您确定要${status === 1 ? '禁用' : '启用'}该附加费用吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              // 创建一级分类
              const result = await this.$service.applicationRentCarSurchargeChangeStatus({
                id: id
              });
              if (result.code === 0) {
                this.$message.success(`${status === 1 ? '禁用' : '启用'}成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      }
    }
  }
</script>
